import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from 'actions/addName'
// import Home from 'bundle-loader?lazy&name=bundle.home!page/home'
import Classification from 'bundle-loader?lazy&name=bundle.classification!page/classification'
import Mine from 'bundle-loader?lazy&name=bundle.mine!page/mine'
import { HashRouter, Redirect, Route, Switch, Link } from 'react-router-dom';
import './style.scss'
import TabBarExample from 'components/tabBarExample'
import lazyLoad from 'components/bundleLoader';
import Home from 'page/home'
class Index extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            name: '张三'
        }
    }
    componentDidMount() {
        this.props.action.addName();
    }
    onClick = () => {
        this.props.action.addName();
    }
    render() {
        return (
            <div className="page-index page">
                <TabBarExample />
                <div className="context-index">
                    <Switch>
                        <Route path={`${this.props.match.path}/home`} exact component={Home} />
                        <Route path={`${this.props.match.path}/classification`} component={lazyLoad(Classification)} />
                        <Route path={`${this.props.match.path}/mine`} component={lazyLoad(Mine)} />
                        <Redirect from={`${this.props.match.path}/`} to={`${this.props.match.path}/home`} />
                    </Switch>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        addName: state.addNameReducer
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        action: bindActionCreators(actions, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Index)